<template>
  <div class="avatar-box" :style="{height: size+'px', width: size+'px'}">
    <img class="avatar-img" :src="src">
    <svg-icon v-if="select" icon-class="select-img" class="seleci-icon"/>
  </div>
</template>

<script>
export default {
  props: ["src", "size", 'select'],
}
</script>

<style lang="less" scoped>
@import '@/assets/css/index.less';

.avatar-box {
  position: relative;
  animation: 1s appear;
  height: 60px;
  width: 60px;
  border-radius: 4px;
  overflow: hidden;
  .flex-center-center();

  .avatar-img{
    height: 100%;
  }

  .seleci-icon{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 25px;
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }
}
</style>
